<template>
	<view class="container">
		<!-- 顶部Header -->
		<view class="header">
			<view class="header-left">
				<u-icon name="arrow-left" size="40" color="#ffffff" @click="goBack"></u-icon>
			</view>
			<view class="header-title">AI智慧点歌</view>
			<view class="header-right">
				<view class="header-right-button">
					<!-- <u-icon name="more-dot-fill" size="32" color="#ffffff" @click="onDevelopingFeature"></u-icon> -->
					<!-- <u-icon name="scan" size="32" color="#ffffff" style="margin-left: 20rpx" @click="onDevelopingFeature"></u-icon> -->
				</view>
			</view>
		</view>

		<!-- 搜索栏 -->
		<view class="search-bar-container">
			<view class="search-bar" @click="goToSearch">
				<u-icon name="search" color="#999999" size="32"></u-icon>
				<text class="search-placeholder">搜索歌星 歌名</text>
			</view>
			<view class="search-tags">
				<view class="tag-item-chuowan" @click="onDevelopingFeature">
					<text>潮玩</text>
				</view>
				<view class="tag-item-ai" @click="onDevelopingFeature">
					<u-icon name="level" color="#ffffff" size="24"></u-icon>
					<text>AI</text>
				</view>
			</view>
		</view>

		<!-- 热门歌手 -->
		<view class="section-title-row">
			<view class="section-title">热门歌手</view>
			<view class="section-more" @click="onMoreSingers">
				更多
				<u-icon name="arrow-right" size="28" color="#666666" />
			</view>
		</view>

		<!-- 热门歌手加载状态 -->
		<view v-if="isLoadingHotSingers" class="loading-container">
			<view class="loading-spinner"></view>
			<text class="loading-text">正在加载热门歌手...</text>
		</view>

		<!-- 热门歌手列表 -->
		<scroll-view v-else-if="hotSingerList.length > 0" scroll-x class="singer-scroll" :show-scrollbar="false">
			<view class="singer-item" v-for="(singer, idx) in hotSingerList" :key="singer.id || singer.singer_id" @click="goSinger(singer)">
				<image :src="singer.singer_avatar || singer.avatar || singer.image || '/static/singer/default.jpg'" class="avatar-img" mode="aspectFill" />
				<view class="singer-name">{{ singer.singer_name || singer.name }}</view>
			</view>
		</scroll-view>

		<!-- 热门歌手空状态 -->
		<view v-else class="empty-singers">
			<text class="empty-text">暂无热门歌手</text>
		</view>

		<!-- 热门排行Tab -->
		<view class="rank-tabs">
			<view v-for="(tab, idx) in rankTabs" :key="idx" :class="['rank-tab', { active: rankTabIdx === idx }]" @click="rankTabIdx = idx">
				{{ tab }}
			</view>
		</view>

		<!-- 加载状态 -->
		<u-loading-page :loading="isLoading" loading-text="正在查询订单..."></u-loading-page>

		<!-- 主内容区 -->
		<view v-if="!isLoading && !showLoginPopup" class="song-content-wrapper">
			<view v-if="activeOrder" class="song-header">
				<view class="current-order-info">正在为包间【{{ activeOrder.room_name || '未知' }}】点歌</view>
			</view>

			<!-- 无订单提示 -->
			<!-- <view v-if="!activeOrder" class="no-order-notice">
				<view class="notice-icon">⚠️</view>
				<view class="notice-title">暂无活跃订单</view>
				<view class="notice-desc">请先开启KTV订单才能使用点歌功能</view>
			</view> -->

			<!-- 热门歌曲列表 -->
			<view class="song-list">
				<!-- 加载状态 -->
				<view v-if="isLoadingHotSongs" class="loading-container">
					<view class="loading-spinner"></view>
					<text class="loading-text">正在加载热门歌曲...</text>
				</view>

				<!-- 热门歌曲列表 (最多显示10首) -->
				<view v-else-if="displayHotSongs.length > 0">
					<view class="song-item" v-for="(song, idx) in displayHotSongs" :key="song.song_id">
						<view class="song-index">{{ idx + 1 }}</view>
						<view class="song-info">
							<view class="song-title">{{ song.song_name }}</view>
							<view class="song-artist">{{ song.singer_name }}</view>
						</view>
						<view class="song-actions">
							<view class="action-btn" @click="orderSong(song)">
								<u-icon name="plus-circle" size="44" :color="activeOrder ? '#3c82ff' : '#999999'"></u-icon>
							</view>
							<!-- <view class="action-btn" @click="onSongMore(song)">
								<u-icon name="more-dot-fill" size="44" color="#999999"></u-icon>
							</view> -->
						</view>
					</view>

					<!-- 查看更多热门歌曲按钮 -->
					<view v-if="hotSongList.length > 10" class="view-more-btn" @click="showAllHotSongs">
						<text class="view-more-text">查看更多热门歌曲 ({{ hotSongList.length - 10 }}首)</text>
						<u-icon name="arrow-right" size="28" color="#667eea"></u-icon>
					</view>
				</view>

				<!-- 空状态 -->
				<view v-else class="empty-songs">
					<view class="empty-icon">🎵</view>
					<text class="empty-text">暂无热门歌曲</text>
				</view>
			</view>

			<!-- 热门歌单区域 -->
			<view class="playlist-section">
				<view class="section-title-row">
					<view class="section-title">热门歌单</view>
				</view>

				<!-- 歌单加载状态 -->
				<view v-if="isLoadingSubjects" class="loading-container">
					<view class="loading-spinner"></view>
					<text class="loading-text">正在加载热门歌单...</text>
				</view>

				<!-- 歌单网格 (显示所有歌单，4列布局) -->
				<view v-else-if="displaySubjects.length > 0" class="playlist-grid-container">
					<view class="playlist-grid">
						<view
							v-for="(playlist, idx) in displaySubjects"
							:key="playlist && (playlist.subject_id || playlist.id) ? playlist.subject_id || playlist.id : `playlist_${idx}`"
							class="playlist-item"
							@click="playlist ? goPlaylistDetail(playlist) : null"
						>
							<image :src="playlist && playlist.cover_url ? playlist.cover_url : '/static/playlist/default.jpg'" class="playlist-cover" mode="aspectFill" />
							<view class="playlist-info">
								<view class="playlist-title">{{ playlist && (playlist.subject_name || playlist.name) ? playlist.subject_name || playlist.name : '未知歌单' }}</view>
								<view class="playlist-desc">精选歌单</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 歌单空状态 -->
				<view v-else class="empty-playlists">
					<view class="empty-icon">📋</view>
					<text class="empty-text">暂无热门歌单</text>
				</view>
			</view>
		</view>

		<!-- 空状态：未选中订单且加载结束后显示 -->
		<view v-if="!activeOrder && !isLoading && !showLoginPopup" class="empty-state">
			<u-empty mode="order" text="您当前没有正在进行的KTV订单"></u-empty>
		</view>

		<!-- 底部播放器栏 -->
		<view class="player-bar">
			<!-- 当前播放歌曲信息 -->
			<view class="player-left" @click="showCurrentSong">
				<image :src="currentPlayingSong.cover_url || currentPlayingSong.cover || '/static/song/default-cover.jpg'" class="player-avatar" mode="aspectFill" />
				<view class="player-info">
					<view class="player-title">{{ currentPlayingSong.song_name || '暂无歌曲播放' }}</view>
					<view class="player-desc">{{ currentPlayingSong.singer_name || '去点一首吧~' }}</view>
				</view>
			</view>

			<!-- 播放控制按钮 -->
			<view class="player-controls">
				<!-- 播放/暂停按钮 -->
				<!-- <view class="control-item" :class="{ disabled: !hasCurrentSong }" @click="hasCurrentSong ? togglePlayPause() : null"> -->
				<view class="control-item" @click="togglePlayPause()">
					<u-icon
						:name="isPlaying ? 'pause-circle-fill' : 'play-circle-fill'"
						size="44"
						:color="hasCurrentSong ? (activeOrder ? '#3c82ff' : '#999999') : '#cccccc'"
					></u-icon>
					<text class="control-text" :style="{ color: hasCurrentSong ? (activeOrder ? '#ffffff' : '#999999') : '#cccccc' }">{{ isPlaying ? '暂停' : '播放' }}</text>
				</view>

				<!-- 切歌按钮 - 只有在有已点歌曲时显示 -->
				<view v-if="hasCurrentSong" class="control-item" @click="handleNextSong">
					<u-icon name="arrow-right-double" size="44" :color="activeOrder ? '#ffffff' : '#999999'"></u-icon>
					<text class="control-text" :style="{ color: activeOrder ? '#ffffff' : '#999999' }">切歌</text>
				</view>

				<!-- 已点歌曲按钮 -->
				<view class="control-item" @click="goOrdered">
					<u-icon name="list-dot" size="44" :color="activeOrder ? '#ffffff' : '#999999'"></u-icon>
					<text class="control-text" :style="{ color: activeOrder ? '#ffffff' : '#999999' }">已点</text>
				</view>

				<!-- 调控按钮 -->
				<view class="control-item" @click="goRoomCtrl">
					<u-icon name="setting" size="44" :color="activeOrder ? '#3c82ff' : '#999999'"></u-icon>
					<text class="control-text" :style="{ color: activeOrder ? '#ffffff' : '#999999' }">调控</text>
				</view>
			</view>
		</view>

		<!-- 全部热门歌曲弹窗 -->
		<u-popup v-model="showAllHotSongsPopup" mode="bottom" border-radius="20" height="80%">
			<view class="all-hot-songs-popup">
				<view class="popup-header">
					<view class="popup-title">全部热门歌曲</view>
					<u-icon name="close" size="32" color="#999999" @click="showAllHotSongsPopup = false"></u-icon>
				</view>
				<scroll-view scroll-y class="all-songs-scroll">
					<view class="song-item" v-for="(song, idx) in hotSongList" :key="song.song_id || song.id">
						<view class="song-index">{{ idx + 1 }}</view>
						<view class="song-info">
							<view class="song-title">{{ song.song_name }}</view>
							<view class="song-artist">{{ song.singer_name }}</view>
						</view>
						<view class="song-actions">
							<view class="action-btn" @click="orderSong(song)">
								<u-icon name="plus-circle" size="44" :color="activeOrder ? '#3c82ff' : '#999999'"></u-icon>
							</view>
							<!-- <view class="action-btn" @click="onSongMore(song)">
								<u-icon name="more-dot-fill" size="44" color="#999999"></u-icon>
							</view> -->
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>

		<!-- 歌曲操作弹窗 -->
		<u-popup v-model="showSongActionPopup" mode="bottom" border-radius="20" :mask-close-able="true">
			<view class="song-action-popup">
				<view class="popup-title">歌曲操作</view>
				<view class="action-list">
					<view class="action-item-popup" @click="grabSong">
						<u-icon name="play-circle" size="32" color="#4ecdc4" />
						<text class="action-text-popup">抢歌</text>
					</view>
					<view class="action-item-popup" @click="pinSong">
						<u-icon name="pushpin" size="32" color="#45b7d1" />
						<text class="action-text-popup">置顶</text>
					</view>
				</view>
				<u-button type="default" class="mt-20" @click="showSongActionPopup = false">取消</u-button>
			</view>
		</u-popup>

		<!-- 订单选择弹窗 -->
		<u-popup v-model="showOrderPopup" @close="closeOrderPopup" mode="bottom" border-radius="20" :mask-close-able="true">
			<view class="order-popup">
				<view class="popup-title">请选择您要点歌的订单</view>
				<scroll-view scroll-y class="order-scroll-list">
					<view v-for="(order, idx) in orderList" :key="order && order.id ? order.id : `order_${idx}`" class="order-item" @click="order ? selectOrder(order) : null">
						<view v-if="order" class="order-info">
							<text class="room-name">包间：{{ order.room_name || '未知' }}</text>
							<text class="order-time">
								订单ID：{{ order.id || '未知' }}
								<text v-if="order.start_time_text && order.end_time_text">| {{ order.start_time_text }} - {{ order.end_time_text }}</text>
							</text>
							<text v-if="order.status_text" class="order-status">状态：{{ order.status_text }}</text>
						</view>
						<view v-else class="order-info">
							<text class="room-name">数据异常</text>
						</view>
						<u-icon name="arrow-right" color="#999" size="16"></u-icon>
					</view>
				</scroll-view>
				<view class="popup-actions">
					<u-button type="default" @click="closeOrderPopup">取消</u-button>
				</view>
			</view>
		</u-popup>

		<!-- uView登录弹窗 -->
		<u-popup v-model="showLoginPopup" mode="center" border-radius="16" width="600rpx" :mask-close-able="true" @close="closeLoginPopup">
			<view class="login-popup">
				<view class="popup-header">
					<view class="popup-title">登录</view>
					<view class="popup-close" @click="closeLoginPopup">
						<u-icon name="close" color="#999" size="20"></u-icon>
					</view>
				</view>

				<view class="login-methods">
					<u-button type="success" shape="round" :loading="wechatLoading" :disabled="!agreePolicy" @click="handleWechatLogin" :custom-style="wechatBtnStyle">
						<u-icon name="weixin-fill" color="#fff" size="20" style="margin-right: 10rpx"></u-icon>
						{{ wechatLoading ? '登录中...' : '微信一键登录' }}
					</u-button>

					<!-- <u-button 
            type="primary" 
            shape="round" 
            plain
            @click="handlePhoneLogin"
            :custom-style="phoneBtnStyle"
          >
            <u-icon name="phone" color="#0066ff" size="20" style="margin-right: 10rpx;"></u-icon>
            手机号登录
          </u-button> -->
				</view>

				<view class="login-tips">
					<u-checkbox v-model="agreePolicy" shape="circle" active-color="#007aff" :size="32" class="login-checkbox" />
					<text class="tips-text">我已阅读并同意</text>
					<text class="link-text" @click="showPrivacy('agreement')">《用户协议》</text>
					<text class="tips-text">和</text>
					<text class="link-text" @click="showPrivacy('policy')">《隐私政策》</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import request from '@/common/request.js';
import { mapState, mapActions } from 'vuex';
import ktvCommand from '@/common/ktv-command-utils.js';
import { checkLoginStatus, wechatMiniLogin } from '@/common/auth.js';

export default {
	data() {
		return {
			search: '',
			showSongActionPopup: false, // 歌曲操作弹窗
			currentSong: null, // 当前操作的歌曲
			rankTabs: ['热门排行'],
			rankTabIdx: 0,
			location: '',
			city: {},
			hotSongList: [], // 热门歌曲列表
			isLoadingHotSongs: false, // 热门歌曲加载状态
			hotSingerList: [], // 热门歌星列表
			isLoadingHotSingers: false, // 热门歌星加载状态
			subjectList: [], // 歌单列表
			isLoadingSubjects: false, // 歌单加载状态
			currentPage: 1, // 当前页码
			isLoading: true,
			showLoginPopup: false,
			showOrderPopup: false,
			showAllHotSongsPopup: false, // 全部热门歌曲弹窗
			orderList: [],
			activeOrder: null, // 当前生效的订单
			// 播放器相关状态
			currentPlayingSong: {},
			isPlaying: false,
			// 防抖控制
			lastCommandTime: 0,
			commandCooldown: 1000, // 1秒冷却时间
			debugInfo: '', // 添加调试信息
			wechatLoading: false,
			wechatBtnStyle: {
				backgroundColor: '#07c160',
				borderColor: '#07c160',
				marginBottom: '20rpx'
			},
			agreePolicy: false // 协议勾选框状态
		};
	},
	computed: {
		...mapState({
			userInfo: (state) => state.userInfo
		}),
		isLoggedIn() {
			const token = uni.getStorageSync('token');
			return token && this.userInfo && this.userInfo.id;
		},
		isReady() {
			return this.isLoggedIn && this.activeOrder;
		},
		// 显示的热门歌曲（最多10首）
		displayHotSongs() {
			return this.hotSongList.slice(0, 10);
		},
		// 显示所有歌单
		displaySubjects() {
			const subjects = this.subjectList.filter((subject) => {
				return subject && typeof subject === 'object' && (subject.subject_id || subject.id);
			});
			console.log('displaySubjects 计算结果:', subjects);
			return subjects;
		},
		// 是否有当前播放歌曲
		hasCurrentSong() {
			return this.currentPlayingSong && this.currentPlayingSong.song_name;
		}
	},
	watch: {
		isLoggedIn: {
			handler(isLoggedIn) {
				console.log('isLoggedIn changed:', isLoggedIn);
				const token = uni.getStorageSync('token');
				console.log('token exists:', !!token);

				if (isLoggedIn) {
					console.log('用户已登录，开始检查订单');
					this.showLoginPopup = false;
					this.checkActiveOrders();
				} else {
					if (token) {
						console.log('有token但userInfo为空，主动获取用户信息');
						this.isLoading = true;
						this.fetchUserInfoAction()
							.then(() => {
								console.log('用户信息获取成功');
								this.isLoading = false;
							})
							.catch((error) => {
								console.error('获取用户信息失败:', error);
								this.isLoading = false;
								uni.removeStorageSync('token');
								this.showLoginPopup = true;
							});
					} else {
						console.log('确定未登录，显示登录弹窗');
						this.isLoading = false;
						this.showLoginPopup = true;
					}
				}
			},
			immediate: true
		}
	},
	onLoad() {
		console.log('点歌页面 onLoad');
		this.getLocation();
	},
	onShow() {
		// 页面显示时刷新播放器状态
		if (this.activeOrder) {
			this.loadCurrentPlayingSong();
		}
	},
	methods: {
		...mapActions(['fetchUserInfoAction']),

		// 检查订单状态并执行操作
		checkOrderAndExecute(callback) {
			if (!this.isLoggedIn) {
				this.handleLogin();
				return false;
			}

			if (!this.activeOrder) {
				// 如果有多个订单，弹出选择弹窗
				if (this.orderList && this.orderList.length > 1) {
					this.showOrderPopup = true;
					return false;
				}
				// 如果没有订单，提示创建订单
				else if (this.orderList && this.orderList.length === 0) {
					uni.showModal({
						title: '提示',
						content: '请先开启KTV订单才能使用此功能',
						showCancel: false,
						confirmText: '知道了'
					});
					return false;
				}
				// 如果只有一个订单但未选中，直接选择
				else if (this.orderList && this.orderList.length === 1) {
					this.selectOrder(this.orderList[0]);
					if (typeof callback === 'function') {
						return callback();
					}
					return true;
				}
				// 其他情况提示重新检查订单
				else {
					uni.showModal({
						title: '提示',
						content: '订单状态异常，请重新检查',
						showCancel: true,
						cancelText: '返回',
						confirmText: '重新检查',
						success: (res) => {
							if (res.confirm) {
								this.checkActiveOrders();
							}
						}
					});
					return false;
				}
			}

			if (typeof callback === 'function') {
				return callback();
			}
			return true;
		},

		// 检查是否可以执行命令
		canExecuteCommand() {
			const now = Date.now();
			const timeSinceLastCommand = now - this.lastCommandTime;

			if (timeSinceLastCommand < this.commandCooldown) {
				const remainingTime = Math.ceil((this.commandCooldown - timeSinceLastCommand) / 1000);
				uni.showToast({
					title: `请等待${remainingTime}秒后再操作`,
					icon: 'none',
					duration: 1000
				});
				return false;
			}

			return true;
		},

		// 更新最后命令时间
		updateLastCommandTime() {
			this.lastCommandTime = Date.now();
		},

		// 跳转到搜索页面
		goToSearch() {
			if (!this.checkOrderAndExecute(() => true)) return;

			uni.navigateTo({
				url: `/pages/song/song-search?order_id=${this.activeOrder.id}`
			});
		},

		// 显示全部热门歌曲弹窗（替代页面跳转）
		showAllHotSongs() {
			if (!this.checkOrderAndExecute(() => true)) return;
			this.showAllHotSongsPopup = true;
		},

		// 跳转到歌单详情页面
		goPlaylistDetail(playlist) {
			console.log('goPlaylistDetail 接收到的参数:', playlist);

			// 参数验证
			if (!playlist || typeof playlist !== 'object') {
				console.error('goPlaylistDetail: 无效的歌单参数', playlist);
				uni.showToast({
					title: '歌单数据异常',
					icon: 'none'
				});
				return;
			}

			if (!this.checkOrderAndExecute(() => true)) return;

			const playlistId = playlist.subject_id || playlist.id;
			const playlistName = playlist.subject_name || playlist.name || '';
			const coverUrl = playlist.cover_url || '';

			console.log('歌单详情参数:', {
				playlistId,
				playlistName,
				coverUrl
			});

			if (!playlistId) {
				console.error('歌单ID缺失:', playlist);
				uni.showToast({
					title: '歌单ID缺失',
					icon: 'none'
				});
				return;
			}

			uni.navigateTo({
				url: `/pages/song/playlist-detail?order_id=${this.activeOrder.id}&playlist_id=${playlistId}&playlist_name=${encodeURIComponent(
					playlistName
				)}&cover_url=${encodeURIComponent(coverUrl)}`
			});
		},

		// 播放/暂停控制
		async togglePlayPause() {
			if (!this.checkOrderAndExecute(() => true)) return;
			if (!this.canExecuteCommand()) return;
			this.updateLastCommandTime();

			const success = await ktvCommand.playPause(this.activeOrder.id);
			if (success) {
				this.isPlaying = !this.isPlaying;
				uni.showToast({
					title: this.isPlaying ? '开始播放' : '暂停播放',
					icon: 'success'
				});
			}
		},

		// 切歌
		async handleNextSong() {
			if (!this.checkOrderAndExecute(() => true)) return;
			if (!this.canExecuteCommand()) return;

			uni.showModal({
				title: '确认切歌',
				content: '确定要切换到下一首歌曲吗？',
				success: async (res) => {
					if (res.confirm) {
						this.updateLastCommandTime();
						const success = await ktvCommand.nextSong(this.activeOrder.id);
						if (success) {
							uni.showToast({
								title: '切歌成功',
								icon: 'success'
							});
							// 切歌后重新加载当前播放歌曲
							setTimeout(() => {
								this.loadCurrentPlayingSong();
							}, 1000);
						}
					}
				}
			});
		},

		// 加载已点歌曲第一个作为当前播放歌曲
		async loadCurrentPlayingSong() {
			if (!this.activeOrder) return;

			try {
				const res = await request.httpTokenRequest({
					url: `/api/ktv/getPintedSong?order_id=${this.activeOrder.id}`,
					method: 'get'
				});

				if (res.data.code === 1 && res.data.data && res.data.data.length > 0) {
					// 取第一个已点歌曲作为当前播放
					const firstSong = res.data.data[0];
					this.currentPlayingSong = firstSong;

					// 判断播放状态 - 如果歌曲状态是playing或者is_playing为true，则显示为播放中
					this.isPlaying = firstSong.status === 'playing' || firstSong.is_playing === true || firstSong.is_playing === 1;

					console.log('当前播放歌曲:', this.currentPlayingSong);
					console.log('播放状态:', this.isPlaying);
				} else {
					// 没有已点歌曲
					this.currentPlayingSong = {};
					this.isPlaying = false;
				}
			} catch (error) {
				console.error('获取已点歌曲失败:', error);
				this.currentPlayingSong = {};
				this.isPlaying = false;
			}
		},

		// 显示当前播放歌曲详情
		showCurrentSong() {
			if (this.currentPlayingSong.song_name) {
				// 可以弹出当前播放歌曲的详情弹窗
				uni.showModal({
					title: '当前播放',
					content: `${this.currentPlayingSong.song_name} - ${this.currentPlayingSong.singer_name}`,
					showCancel: false
				});
			}
		},

		// 开发中功能提示
		onDevelopingFeature() {
			uni.showToast({
				title: '功能正在开发中',
				icon: 'none',
				duration: 2000
			});
		},

		// 微信登录
		async handleWechatLogin() {
			if (this.wechatLoading) return;
			try {
				this.wechatLoading = true;
				const result = await wechatMiniLogin();
				if (result.success) {
					(await this.fetchUserInfoAction) && this.fetchUserInfoAction();
					this.isLoggedIn = true;
					this.showLoginPopup = false;
					this.wechatLoading = false;
					uni.showToast({ title: '登录成功', icon: 'success' });
					this.checkActiveOrders();
				} else {
					throw new Error(result.message || '登录失败');
				}
			} catch (error) {
				uni.showToast({ title: error.message || '登录失败', icon: 'none' });
			} finally {
				this.wechatLoading = false;
			}
		},

		checkLoginStatus() {
			return new Promise((resolve, reject) => {
				uni.checkSession({
					success: () => {
						// session_key 未过期，并且在本生命周期一直有效
						console.log('session_key 未过期');
						resolve(true);
					},
					fail: () => {
						// session_key 已经过期，需要重新登录
						console.log('session_key 已过期');
						resolve(false);
					}
				});
			});
		},

		getLocation() {
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					if (res && res.latitude && res.longitude) {
						this.location = `${res.latitude},${res.longitude}`;
						this.getCityInfo(res.latitude, res.longitude);
					} else {
						this.location = '';
						this.city = {};
					}
				},
				fail: (err) => {
					this.location = '';
					this.city = {};
					// 新增：处理用户拒绝授权地理位置
					if (err && err.errMsg && err.errMsg.indexOf('auth deny') !== -1) {
						uni.showModal({
							title: '需要授权',
							content: '需要获取您的地理位置以提供完整服务，请在设置中开启地理位置权限。',
							confirmText: '去设置',
							cancelText: '取消',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({
										success: (settingRes) => {
											// 用户可能已授权，尝试重新获取
											if (settingRes.authSetting && settingRes.authSetting['scope.userLocation']) {
												this.getLocation();
											}
										}
									});
								}
							}
						});
					} else {
						uni.showToast({
							title: '获取地理位置失败',
							icon: 'none'
						});
					}
				}
			});
		},

		getCityInfo(latitude, longitude) {
			// 获取城市信息的逻辑
		},

		goBack() {
			uni.navigateBack();
		},

		goSinger(singer) {
			console.log(singer, 'singer');

			if (!this.checkOrderAndExecute(() => true)) return;

			const singerName = singer.name || singer.singer_name || '未知歌手';
			uni.navigateTo({
				url: `/pages/song/singer?name=${singerName}&order_id=${this.activeOrder.id}&avatar=${singer.singer_avatar}`
			});
		},

		// 点歌
		async orderSong(song) {
			if (!this.isLoggedIn) {
				this.showLoginPopup = true;
				return;
			}
			if (!this.agreePolicy) {
				this.$u.toast('请先勾选同意《用户协议》和《隐私政策》');
				return;
			}
			if (!this.checkOrderAndExecute(() => true)) return;
			if (!this.canExecuteCommand()) return;
			this.updateLastCommandTime();

			const success = await ktvCommand.addSong(this.activeOrder.id, song.song_id);

			if (success) {
				uni.showToast({
					title: `已点：${song.song_name}`,
					icon: 'success'
				});

				// 点歌成功后刷新播放器状态
				setTimeout(() => {
					this.loadCurrentPlayingSong();
				}, 500);
			}
		},

		onSongMore(song) {
			if (!this.checkOrderAndExecute(() => true)) return;

			this.currentSong = song;
			this.showSongActionPopup = true;
		},

		onMoreSingers() {
			if (!this.checkOrderAndExecute(() => true)) return;

			uni.navigateTo({
				url: `/pages/song/singer-list?order_id=${this.activeOrder.id}`
			});
		},

		// 抢歌
		async grabSong() {
			if (!this.currentSong) return;
			if (!this.canExecuteCommand()) return;
			this.updateLastCommandTime();

			const success = await ktvCommand.insertSong(this.activeOrder.id, this.currentSong.song_id);

			if (success) {
				uni.showToast({
					title: `已抢歌：${this.currentSong.song_name}`,
					icon: 'success'
				});

				// 抢歌成功后刷新播放器状态
				setTimeout(() => {
					this.loadCurrentPlayingSong();
				}, 500);
			}
			this.showSongActionPopup = false;
		},

		// 置顶歌曲
		async pinSong() {
			if (!this.currentSong) return;
			if (!this.canExecuteCommand()) return;
			this.updateLastCommandTime();

			const success = await ktvCommand.insertSong(this.activeOrder.id, this.currentSong.song_id);

			if (success) {
				uni.showToast({
					title: `已置顶：${this.currentSong.song_name}`,
					icon: 'success'
				});

				// 置顶成功后刷新播放器状态
				setTimeout(() => {
					this.loadCurrentPlayingSong();
				}, 500);
			}
			this.showSongActionPopup = false;
		},

		goOrdered() {
			if (!this.checkOrderAndExecute(() => true)) return;

			uni.navigateTo({
				url: `/pages/song/ordered?order_id=${this.activeOrder.id}`
			});
		},

		goRoomCtrl() {
			if (!this.checkOrderAndExecute(() => true)) return;

			uni.navigateTo({
				url: `/pages/song/roomctrl?order_id=${this.activeOrder.id}`
			});
		},

		async checkActiveOrders() {
			console.log('开始检查KTV订单...');
			this.isLoading = true;
			this.activeOrder = null;
			try {
				const res = await request.httpTokenRequest({
					url: '/api/order/getKtvOrder',
					method: 'get'
				});

				console.log('订单接口返回:', res.data);

				if (res.data.code === 1) {
					const rawOrders = res.data.data || [];
					// 过滤掉无效的订单数据
					const orders = rawOrders.filter((order) => order && typeof order === 'object' && order.id);

					console.log('原始订单数量:', rawOrders.length);
					console.log('有效订单数量:', orders.length);
					console.log('有效订单列表:', orders);

					if (orders.length === 0) {
						console.log('没有有效订单，显示提示');
						this.showNoOrderAlert();
					} else if (orders.length === 1) {
						console.log('只有一个订单，直接选择');
						this.selectOrder(orders[0]);
					} else {
						console.log('有多个订单，显示选择弹窗');
						this.orderList = orders;
						this.showOrderPopup = true;
						console.log('订单选择弹窗状态:', this.showOrderPopup);
						console.log('订单列表数据:', this.orderList);
					}
				} else {
					console.log('接口返回失败，code:', res.data.code);
					this.showNoOrderAlert();
				}
			} catch (error) {
				console.error('checkActiveOrders 失败:', error);
				this.showNoOrderAlert();
			} finally {
				this.isLoading = false;
			}
		},

		selectOrder(order) {
			// 添加参数验证
			if (!order || typeof order !== 'object') {
				console.error('selectOrder: 无效的订单参数', order);
				uni.showToast({
					title: '订单数据异常',
					icon: 'none'
				});
				return;
			}

			console.log('选择订单:', order);
			this.activeOrder = order;
			this.showOrderPopup = false;

			// 处理订单显示信息
			const roomName = order.room_name || '未知';
			const startTime = order.start_time_text || order.start_time || '未知时间';
			const endTime = order.end_time_text || order.end_time || '未知时间';

			uni.showToast({
				title: `已进入包间【${roomName}】的点歌台`,
				icon: 'success'
			});

			this.getHotSongList(order.id);
			this.getHotSingerList(order.id);
			this.getSubjectList(order.id);
			// 加载当前播放歌曲
			this.loadCurrentPlayingSong();
		},

		closeLoginPopup() {
			this.showLoginPopup = false;
			this.wechatLoading = false;
		},

		closeOrderPopup() {
			this.showOrderPopup = false;
		},

		showPrivacy(type) {
			const urlKey = type === 'policy' ? 'yszc_url' : 'yhxy_url';
			const title = type === 'policy' ? '隐私政策' : '用户协议';
			if (this.globalConfig && this.globalConfig[urlKey]) {
				uni.navigateTo({
					url: `/pages/common/webview?url=${encodeURIComponent(this.globalConfig[urlKey])}&title=${encodeURIComponent(title)}`
				});
			} else {
				this.$u.toast('协议地址未配置');
			}
		},

		async getHotSongList(orderId) {
			console.log('开始获取热门歌曲，订单ID:', orderId);
			this.isLoadingHotSongs = true;
			try {
				const res = await request.httpTokenRequest({
					url: `/api/ktv/getHotSong?order_id=${orderId}`,
					method: 'get'
				});

				if (res.data.code === 1) {
					let hotSongs = [];
					if (res.data.data && res.data.data.hot_song) {
						hotSongs = res.data.data.hot_song;
					} else if (res.data.data && Array.isArray(res.data.data)) {
						hotSongs = res.data.data;
					} else if (res.data.data && res.data.data.list) {
						hotSongs = res.data.data.list;
					}

					this.hotSongList = hotSongs || [];
					console.log('获取热门歌曲成功，数量:', this.hotSongList.length);
				} else {
					throw new Error(res.data.msg || '获取热门歌曲失败');
				}
			} catch (error) {
				console.error('获取热门歌曲失败:', error);
				uni.showToast({
					title: error.message || '获取热门歌曲失败',
					icon: 'none'
				});
			} finally {
				this.isLoadingHotSongs = false;
			}
		},

		async getHotSingerList(orderId, page = 1) {
			console.log('开始获取热门歌星，订单ID:', orderId);
			this.isLoadingHotSingers = true;
			try {
				const res = await request.httpTokenRequest({
					url: `/api/ktv/getHotSinger?order_id=${orderId}&page=${page}`,
					method: 'get'
				});

				if (res.data.code === 1) {
					let hotSingers = [];
					if (res.data.data && res.data.data.hot_singer && res.data.data.hot_singer.data) {
						hotSingers = res.data.data.hot_singer.data;
					} else if (res.data.data && res.data.data.hot_singer) {
						hotSingers = res.data.data.hot_singer;
					} else if (res.data.data && Array.isArray(res.data.data)) {
						hotSingers = res.data.data;
					} else if (res.data.data && res.data.data.list) {
						hotSingers = res.data.data.list;
					}

					if (page === 1) {
						this.hotSingerList = hotSingers || [];
					} else {
						this.hotSingerList = [...this.hotSingerList, ...(hotSingers || [])];
					}
					console.log('获取热门歌星成功，数量:', this.hotSingerList.length);
				} else {
					throw new Error(res.data.msg || '获取热门歌星失败');
				}
			} catch (error) {
				console.error('获取热门歌星失败:', error);
				uni.showToast({
					title: error.message || '获取热门歌星失败',
					icon: 'none'
				});
			} finally {
				this.isLoadingHotSingers = false;
			}
		},

		async getSubjectList(orderId, page = 1) {
			console.log('开始获取歌单列表，订单ID:', orderId);
			this.isLoadingSubjects = true;
			try {
				const res = await request.httpTokenRequest({
					url: `/api/ktv/getSubjectList?order_id=${orderId}&page=${page}`,
					method: 'get'
				});

				console.log('歌单接口原始返回:', res.data);

				if (res.data.code === 1) {
					let subjects = [];
					// 根据新的数据结构解析
					if (res.data.data && res.data.data.data) {
						subjects = res.data.data.data;
					} else if (res.data.data && Array.isArray(res.data.data)) {
						subjects = res.data.data;
					}

					console.log('解析后的歌单数据:', subjects);

					// 过滤无效数据
					const validSubjects = (subjects || []).filter((subject) => {
						const isValid = subject && typeof subject === 'object' && (subject.subject_id || subject.id) && (subject.subject_name || subject.name);

						if (!isValid) {
							console.warn('发现无效歌单数据:', subject);
						}
						return isValid;
					});

					console.log('过滤后的有效歌单数据:', validSubjects);

					// 获取所有歌单，不分页
					if (page === 1) {
						this.subjectList = validSubjects;

						// 如果还有更多页，继续获取
						if (res.data.data.has_more_page && res.data.data.current_page < Math.ceil(res.data.data.total / res.data.data.per_page)) {
							// 递归获取下一页
							setTimeout(() => {
								this.getSubjectList(orderId, page + 1);
							}, 100);
						}
					} else {
						// 追加后续页面的数据
						this.subjectList = [...this.subjectList, ...validSubjects];

						// 继续获取下一页
						if (res.data.data.has_more_page && res.data.data.current_page < Math.ceil(res.data.data.total / res.data.data.per_page)) {
							setTimeout(() => {
								this.getSubjectList(orderId, page + 1);
							}, 100);
						}
					}

					console.log('最终歌单列表:', this.subjectList);
					console.log('获取歌单列表成功，当前数量:', this.subjectList.length, '总数:', res.data.data.total);
				} else {
					throw new Error(res.data.msg || '获取歌单列表失败');
				}
			} catch (error) {
				console.error('获取歌单列表失败:', error);
				uni.showToast({
					title: error.message || '获取歌单列表失败',
					icon: 'none'
				});
			} finally {
				this.isLoadingSubjects = false;
			}
		},

		// 显示无订单提示
		showNoOrderAlert() {
			console.log('显示无订单提示');
			uni.showModal({
				title: '提示',
				content: '您当前没有正在进行的KTV订单，请先预订包间',
				showCancel: true,
				cancelText: '返回',
				confirmText: '重新检查',
				success: (res) => {
					if (res.confirm) {
						// 重新检查订单
						this.checkActiveOrders();
					} else {
						// 返回上一页
						uni.navigateBack();
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	background: linear-gradient(180deg, #0d0d11 0%, #1a1a1f 100%);
	color: #ffffff;
	padding: 20rpx;
	padding-bottom: 160rpx;
}

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	margin-bottom: 20rpx;
	padding-top: 120rpx;
}

.header-title {
	font-size: 36rpx;
	font-weight: bold;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.header-right-button {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 30rpx;
	padding: 10rpx 20rpx;
	display: flex;
	align-items: center;
	backdrop-filter: blur(10rpx);
}

.search-bar-container {
	display: flex;
	align-items: center;
	margin-top: 20rpx;
	gap: 20rpx;
}

.search-bar {
	flex: 1;
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 40rpx;
	padding: 15rpx 30rpx;
	backdrop-filter: blur(10rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.1);
}

.search-placeholder {
	color: #999999;
	margin-left: 15rpx;
	font-size: 28rpx;
}

.search-tags {
	display: flex;
	align-items: center;
	gap: 15rpx;
}

.tag-item-chuowan,
.tag-item-ai {
	padding: 12rpx 15rpx;
	border-radius: 12rpx;
	font-size: 24rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 5rpx;
}

.tag-item-chuowan {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #ffffff;
}

.tag-item-ai {
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	color: #ffffff;
}

.section-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 50rpx;
}

.section-title {
	font-size: 36rpx;
	font-weight: bold;
}

.section-more {
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: #666666;
}

.singer-scroll {
	margin-top: 30rpx;
	white-space: nowrap;
}

.singer-item {
	display: inline-block;
	text-align: center;
	margin-right: 40rpx;
	width: 120rpx;
	transition: all 0.3s;

	&:active {
		transform: scale(0.95);
	}
}

.avatar-img {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	border: 3rpx solid rgba(255, 255, 255, 0.1);
}

.singer-name {
	margin-top: 15rpx;
	font-size: 26rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rank-tabs {
	display: flex;
	margin-top: 50rpx;
	gap: 50rpx;
	align-items: center;
}

.rank-tab {
	font-size: 30rpx;
	color: #888888;
	padding-bottom: 15rpx;
	position: relative;
	transition: all 0.3s;

	&.active {
		font-size: 34rpx;
		font-weight: bold;
		color: #ffffff;

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 40rpx;
			height: 8rpx;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			border-radius: 4rpx;
		}
	}
}

// 无订单提示
.no-order-notice {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40rpx 20rpx;
	background: rgba(255, 193, 7, 0.1);
	border-radius: 15rpx;
	margin: 20rpx 0;
	border: 1rpx solid rgba(255, 193, 7, 0.3);
}

.notice-icon {
	font-size: 60rpx;
	margin-bottom: 15rpx;
}

.notice-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #ffc107;
	margin-bottom: 10rpx;
}

.notice-desc {
	font-size: 24rpx;
	color: #ffffff;
	text-align: center;
	opacity: 0.8;
}

.song-list {
	margin-top: 30rpx;
	display: flex;
	flex-direction: column;
	gap: 15rpx;
}

.song-item {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 15rpx;
	padding: 20rpx;
	backdrop-filter: blur(10rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.1);
	transition: all 0.3s;

	&:active {
		transform: scale(0.98);
		background: rgba(255, 255, 255, 0.1);
	}
}

.song-index {
	width: 40rpx;
	text-align: center;
	font-size: 24rpx;
	color: #888888;
	margin-right: 20rpx;
}

.song-info {
	flex: 1;
	min-width: 0;
}

.song-title {
	font-size: 30rpx;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 8rpx;
}

.song-artist {
	font-size: 24rpx;
	color: #888888;
}

.song-actions {
	display: flex;
	align-items: center;
	gap: 15rpx;
}

.action-btn {
	padding: 10rpx;
	border-radius: 50%;
	transition: all 0.3s;

	&:active {
		transform: scale(0.9);
	}
}

// 查看更多按钮
.view-more-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10rpx;
	padding: 30rpx;
	margin-top: 20rpx;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 15rpx;
	border: 2rpx dashed rgba(102, 126, 234, 0.5);
	transition: all 0.3s;

	&:active {
		transform: scale(0.98);
		background: rgba(102, 126, 234, 0.1);
	}
}

.view-more-text {
	font-size: 28rpx;
	color: #667eea;
	font-weight: 500;
}

// 歌单区域
.playlist-section {
	margin-top: 50rpx;
}

// 歌单网格容器 - 修复布局
.playlist-grid-container {
	margin-top: 30rpx;
}

.playlist-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0;
}

.playlist-item {
	width: calc(50% - 3rpx); // 4列布局，更精确的计算
	margin-bottom: 15rpx;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 12rpx;
	padding: 10rpx;
	backdrop-filter: blur(10rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.1);
	transition: all 0.3s;
	box-sizing: border-box;

	&:active {
		transform: scale(0.95);
		background: rgba(255, 255, 255, 0.1);
	}
}

.playlist-cover {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 8rpx;
	margin-bottom: 8rpx;
}

.playlist-info {
	text-align: center;
}

.playlist-title {
	font-size: 22rpx;
	font-weight: 500;
	color: #ffffff;
	margin-bottom: 4rpx;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
	height: 57rpx; // 固定高度，容纳2行文字
}

.playlist-desc {
	font-size: 20rpx;
	color: #888888;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.loading-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60rpx 0;
	gap: 20rpx;
}

.loading-spinner {
	width: 40rpx;
	height: 40rpx;
	border: 4rpx solid #f3f3f3;
	border-top: 4rpx solid #3c82ff;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.loading-text {
	font-size: 28rpx;
	color: #888888;
}

.empty-songs,
.empty-singers,
.empty-playlists {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60rpx 0;
	gap: 20rpx;
}

.empty-icon {
	font-size: 80rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #888888;
}

.player-bar {
	position: fixed;
	bottom: 140rpx;
	left: 20rpx;
	right: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 25rpx 20rpx; // 增加上下padding
	border-radius: 20rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	backdrop-filter: blur(20rpx);
	z-index: 100;
	min-height: 120rpx; // 设置最小高度
}

.player-left {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
}

.player-avatar {
	width: 100rpx; // 增大图片尺寸
	height: 100rpx; // 增大图片尺寸
	border-radius: 15rpx; // 调整圆角
	flex-shrink: 0;
	object-fit: cover; // 确保图片撑满容器
}

.player-info {
	margin-left: 25rpx; // 增加间距
	min-width: 0;
	flex: 1;
}

.player-title {
	font-size: 30rpx; // 稍微增大字体
	font-weight: bold;
	color: #ffffff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}

.player-desc {
	font-size: 26rpx; // 稍微增大字体
	color: rgba(255, 255, 255, 0.8);
	margin-top: 8rpx; // 增加间距
	line-height: 1.2;
}

.player-controls {
	display: flex;
	gap: 25rpx; // 增加按钮间距
}

.control-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx; // 增加图标和文字间距
	padding: 12rpx; // 增加padding
	border-radius: 12rpx;
	transition: all 0.3s;
	min-width: 60rpx; // 设置最小宽度

	&:active {
		transform: scale(0.9);
		background: rgba(255, 255, 255, 0.1);
	}
}

.control-text {
	font-size: 22rpx; // 稍微增大字体
	color: #ffffff;
	text-align: center;
	white-space: nowrap;
}

// 全部热门歌曲弹窗
.all-hot-songs-popup {
	background: #1a1a1f;
	color: #ffffff;
	display: flex;
	flex-direction: column;
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 40rpx;
	border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
}

.popup-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #ffffff;
}

.all-songs-scroll {
	flex: 1;
	padding: 20rpx;
}

// 歌曲操作弹窗样式
.song-action-popup {
	padding: 40rpx 32rpx 32rpx 32rpx;
	background: #23232b;
	border-radius: 20rpx 20rpx 0 0;
}

.action-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	margin-bottom: 30rpx;
}

.action-item-popup {
	display: flex;
	align-items: center;
	gap: 20rpx;
	padding: 20rpx;
	background-color: #1a1a1f;
	border-radius: 15rpx;
	transition: all 0.3s;

	&:active {
		transform: scale(0.98);
		background-color: #2a2a2f;
	}
}

.action-text-popup {
	font-size: 30rpx;
	color: #ffffff;
}

.mt-20 {
	margin-top: 20rpx;
}

// 登录弹窗样式
.login-popup {
	padding: 40rpx;
	background: #fff;
	border-radius: 16rpx;
	text-align: center;

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.popup-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.popup-close {
			padding: 10rpx;
			cursor: pointer;
		}
	}

	.login-methods {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-bottom: 40rpx;
	}

	.login-tips {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		gap: 10rpx;
		font-size: 24rpx;
		color: #999;

		.login-checkbox {
			margin-right: 10rpx;
		}

		.link-text {
			color: #007aff;
			margin: 0 4rpx;
			text-decoration: underline;
		}
	}
}

// 订单选择弹窗
.order-popup {
	padding: 40rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 0 0;
	max-height: 80vh;
}

.order-scroll-list {
	max-height: 60vh;
}

.order-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f0f0f0;

	&:last-child {
		border-bottom: none;
	}

	&:active {
		background: #f8f8f8;
	}
}

.order-info {
	flex: 1;
}

.room-name {
	font-size: 30rpx;
	color: #333333;
	font-weight: 500;
	margin-bottom: 10rpx;
	display: block;
}

.order-time {
	font-size: 26rpx;
	color: #666666;
	display: block;
	margin-bottom: 5rpx;
}

.order-status {
	font-size: 24rpx;
	color: #007aff;
	display: block;
}

.popup-actions {
	margin-top: 30rpx;
	padding-top: 20rpx;
	border-top: 1rpx solid #f0f0f0;
}
</style>
